// click/click.js
Page({
  widtth: 0,
  height: 0,
  onLoad(options) {
    this.getSize()
  },
  async getSize() {
    const r = await wx.getSystemInfoSync()
    this.width = r.windowWidth
    this.height = r.windowHeight
  },
  onUnload() {
    timer = null
  },
  onReady() {
    const ctx = wx.createCanvasContext('myCanvas')
    // 计算公式： 弧度 = 角度 * Math.PI / 180
    const D6 = 6 * Math.PI / 180
    const D30 = 30 * Math.PI / 180
    const D90 = 90 * Math.PI / 180
    const width = this.width,
      height = this.height
    // 计算表盘半径，留出 30px外边距
    const radius = width / 2 - 30
    draw()
    this.timer = setInterval(draw, 1000)

    function draw() {
      // 设置坐标轴原点为窗口的中心点
      ctx.translate(width / 2, height / 2)
      // 绘制表盘　　
      drawClock(ctx, radius)
      // 绘制指针　　
      drawHand(ctx, radius)
      // 执行绘制　
      ctx.draw()
    }
    // 绘制表盘部分 
    function drawClock(ctx, radius) {
      // 绘制大圆
      // 大圆的半径为radius，线条粗细为2px
      ctx.setLineWidth(2) // 设置线条的粗细
      ctx.beginPath() // 开始一个新路径
      ctx.arc(0, 0, radius, 0, 2 * Math.PI, true)
      ctx.stroke() // 画线
      // 绘制中心圆9　　
      // 中心圆的半径为8px，线条粗细为1px10　 
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.arc(0, 0, 8, 0, 2 * Math.PI, true)
      ctx.stroke()
      // 绘制大刻度盘，线条粗细为5px
      // 大刻度盘需要绘制12个线条，表示12个小时，每次旋转30度　
      drawDial(ctx, 5, 12, D30, radius, 10)
      // 绘制小刻度盘，线条粗细为1px
      // 小刻度盘需要绘制60个线条，表示60分钟或60秒，每次旋转6度
      drawDial(ctx, 1, 60, D6, radius, 10)
      // 绘制文本
      ctx.setFontSize(20) // 字号
      ctx.textBaseline = 'middle' // 文本垂直居中
      // 计算文本距离表盘中心点的半径r
      const r = radius - 30
      for (let i = 1; i <= 12; ++i) {
        // 利用三角函数计算文本坐标
        const x = r * Math.cos(D30 * i - D90)
        const y = r * Math.sin(D30 * i - D90)
        if (i > 10) { // 调整 11 和 12 的位置　　
          // 在画布上绘制文本fillText(文本， 左上角x坐标， 左上角y坐标)　　
          ctx.fillText(i, x - 12, y)
        } else {
          ctx.fillText(i, x - 6, y)
        }
      }
    }
    // 画刻度盘
    function drawDial(ctx, line, size, digst, radius, width) {
      ctx.setLineWidth(line)
      for (let i = 0; i < size; ++i) {
        ctx.rotate(digst)
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - width, 0)
        ctx.stroke()
      }
    }
    // 绘制指针部分
    function drawHand(ctx, radius) {
      const t = new Date()
      let h = t.getHours() // 时
      const m = t.getMinutes() // 分
      const s = t.getSeconds() // 秒
      h = h > 12 ? h - 12 : h // 将24小时制转化为12小时制
      // 时间从3点开始，逆时针旋转90度，指向12点
      ctx.rotate(-D90)
      // 绘制时针
      // 通过 30度 * h 可以计算每个整点的旋转角度　 
      // 如果时间不是整点，需要使用h + m / 60 + s /3600计算准确的偏移度
      drawSHot(ctx, D30 * (h + m / 60 + s / 3600), 6, radius / 2.6)
      // 绘制分针
      drawSHot(ctx, D6 * (m + s / 60), 4, radius / 1.8)
      // 绘制秒针
      drawSHot(ctx, D6 * s, 2, radius / 1.6)
    }

    function drawSHot(ctx, digest, line, radius) {
      ctx.save()
      ctx.rotate(digest)
      ctx.setLineWidth(line)
      ctx.beginPath()
      ctx.moveTo(-20, 0) // 指针线条的起点（ 针尾留出20px）
      ctx.lineTo(radius, 0) // 根据表盘半径计算指针线条的长度
      ctx.stroke()
      ctx.restore()
    }
  },
})
